<template>
  <div class="stage-report">
    <div v-if="historyList.length > 0">
      <div class="stage-report-container">
        <img src="/src/assets/myStudent/stage-icon.png" alt />
        <div class="stage-info">
          <div class="stage-title">
            <span>{{reportData.reportName}}</span>
            <div>
              <div class="history-btn" @click="showHistory">查看历史报告</div>
              <div class="history-btn" @click="createReport">生成新报告</div>
            </div>
          </div>
          <div class="report-info">
            <div>
              教师:
              <span>{{reportData.creatorName}}</span>
            </div>
            <div>
              学生:
              <span>{{reportData.studentName}}</span>
            </div>
            <div>
              生成时间:
              <span>{{reportData.createTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="stage-content">
        <div class="stage-title">{{reportData.reportName}}</div>
        <div class="score-container">
          <div class="score-item">
            <div class="score-title">进门考平均分</div>
            <div class="score-content">
              <span>{{reportData.avgEntranceScore}}</span>
            </div>
          </div>
          <div class="score-item">
            <div class="score-title">课堂练习平均分</div>
            <div class="score-content">
              <span>{{reportData.avgPracticeScore}}</span>
            </div>
          </div>
          <div class="score-item">
            <div class="score-title">作业平均分</div>
            <div class="score-content">
              <span>{{reportData.avgHomeworkScore}}</span>
            </div>
          </div>
        </div>
        <div class="lesson-done">
          <div class="container-title">本阶段课程完成</div>
          <div class="container-content">
            <el-table :data="reportData.lessonSummaryList">
              <el-table-column label="课题名称" prop="handoutName"></el-table-column>
              <el-table-column label="上课日期" prop="classTime"></el-table-column>
              <el-table-column label="进门考" prop="entranceScore"></el-table-column>
              <el-table-column label="课堂练习" prop="practiceScore"></el-table-column>
              <el-table-column label="作业" prop="lastHomeworkScore"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="learn-status-count">
          <div class="container-title">学情统计</div>
          <div class="container-content">
            <div class="lesson-status-item">
              <div class="item-title">
                <span>出勤情况:</span>
              </div>
              <div class="item-content">
                <div>提前{{reportData.attendanceList[0]}}次</div>
                <div>正常{{reportData.attendanceList[1]}}次</div>
                <div>迟到{{reportData.attendanceList[2]}}次</div>
                <div>缺勤{{reportData.attendanceList[3]}}次</div>
              </div>
            </div>
            <div class="lesson-status-item">
              <div class="item-title">
                <span>听课状态:</span>
              </div>
              <div class="item-content">
                <div>优秀{{reportData.listenStateList[0]}}次</div>
                <div>良好{{reportData.listenStateList[1]}}次</div>
                <div>一般{{reportData.listenStateList[2]}}次</div>
              </div>
            </div>
            <div class="lesson-status-item">
              <div class="item-title">
                <span>上节课作业:</span>
              </div>
              <div class="item-content">
                <div>完成{{reportData.homeworkList[0]}}次</div>
                <div>部分完成{{reportData.homeworkList[1]}}次</div>
                <div>未完成{{reportData.homeworkList[2]}}次</div>
              </div>
            </div>
            <div class="lesson-status-item">
              <div class="item-title">
                <span>出门清:</span>
              </div>
              <div class="item-content">
                <div>优秀{{reportData.outStateList[0]}}次</div>
                <div>良好{{reportData.outStateList[1]}}次</div>
                <div>一般{{reportData.outStateList[2]}}次</div>
              </div>
            </div>
            <div class="container-footer"></div>
          </div>
        </div>
        <div class="knowledge-done">
          <div class="container-title">知识点掌握</div>
          <div class="container-content">
            <div class="knowledge-item">
              <span>已掌握</span>
              <div>{{reportData.masterKnowledge}}</div>
            </div>
            <div class="knowledge-item">
              <span>未掌握</span>
              <div>{{reportData.unmasterKnowledge}}</div>
            </div>
            <div class="container-footer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="no-stage" v-else>
      <div class="tips">当前学生还没有生成过阶段报告，点击下方按钮生成新的报告吧~</div>
      <img src="/src/assets/myStudent/no-stage.png" alt />
      <div class="create-btn" @click="createReport">生成新报告</div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, watch } from 'vue'
import PrepareList from './components/prepare-list.vue'
import HistoryReport from './components/history-report.vue'
import $ from '$'
import { ElMessage } from 'element-plus'
export default {
  props: {
    studentId: String,
    data: {
      type: Object,
      default: {},
    },
    searchType: {
      type: Number,
      default: '',
    },
  },
  setup(props) {
    watch(
      () => props.studentId,
      () => {
        queryReport()
      }
    )
    let reportData = ref({
      attendanceList: [],
      listenStateList: [],
      homeworkList: [],
      outStateList: [],
      id: '',
    })
    let historyList = ref([])
    const createReport = async () => {
      let selectData = await $.modal.create({
        title: '新建阶段测评报告',
        width: 780,
        props: { data: props, disabledList: historyList.value },
        component: PrepareList,
      })
      requestReport(selectData)
    }
    const showHistory = async () => {
      let selectData = await $.modal.create({
        title: '查看历史报告',
        width: 780,
        props: { list: historyList.value, currentId: reportData.value.id },
        component: HistoryReport,
      })
      queryReportById(selectData.id)
    }
    const requestReport = async (list) => {
      let res = await $.http.json('/admin/stageReport/createReport', {
        studentId: props.studentId,
        lessonIds: list,
        studentName:
          props.searchType === 1
            ? props.data.studentName
            : props.data.students.find((e) => e.studentId === props.studentId)
                .studentName,
      })
      if (!res.result) return ElMessage.error(res.msg)
      queryReport()
    }
    const queryReport = async () => {
      let res = await $.http.post('/admin/stageReport/query', {
        studentId: props.studentId,
      })
      if (!res.result) return ElMessage.error(res.msg)
      res.json.length > 0 && queryReportById(res.json[0].id)
      historyList.value = res.json
    }

    const queryReportById = async (id) => {
      let res = await $.http.post('/admin/stageReport/queryById', { id })
      if (!res.result) return ElMessage.error(res.msg)
      reportData.value = {
        ...res.json,
        ...filterKnowledge(res.json.master, res.json.unmaster),
      }
    }
    const filterKnowledge = (master, unmaster) => {
      if (unmaster.length > 0) {
        unmaster.forEach((ele) => {
          master.splice(
            master.findIndex((e) => e.id === ele.id),
            1
          )
        })
      }
      return {
        masterKnowledge: master.map((e) => e.name).join(','),
        unmasterKnowledge: unmaster.map((e) => e.name).join(','),
      }
    }
    queryReport()
    return {
      createReport,
      queryReport,
      queryReportById,
      reportData,
      historyList,
      filterKnowledge,
      showHistory,
    }
  },
}
</script>

<style scoped lang="scss">
.stage-report {
  height: calc(100% - 60px);
  background: #f4f5f9;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  .stage-report-container {
    padding: 25px 30px;
    background: #ffffff;
    box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, 0.08);
    border-radius: 0 0 6px 6px;
    border: 1px solid #ebf0fc;
    display: flex;
    > img {
      height: 60px;
      width: 60px;
      margin-right: 15px;
    }
    .stage-info {
      flex: 1;
      .stage-title {
        display: flex;
        justify-content: space-between;
        :nth-child(1) {
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        > div {
          margin-bottom: 10px;
          > :nth-child(1) {
            margin: 0 10px;
          }
        }
        .history-btn {
          float: right;
          padding: 7px 24px;
          background: rgba(250, 173, 20, 0.8);
          border-radius: 18px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          cursor: pointer;
        }
      }
      .report-info {
        display: flex;
        :nth-child(2) {
          margin: 0 30px;
        }
        > div {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          > span {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }
  }
  .stage-content {
    flex: 1;
    margin-top: 20px;
    background: #ffffff;
    box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, 0.08);
    border-radius: 6px;
    border: 1px solid #ebf0fc;
    position: relative;
    padding: 30px;
    &::before {
      content: '';
      width: 270px;
      height: 16px;
      background: #72b22a;
      border-radius: 8px;
      position: absolute;
      left: calc(50% - 135px);
      top: -8px;
    }
    .stage-title {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      text-align: center;
    }

    .score-container {
      display: grid;
      grid-template: auto / repeat(3, calc((100% - 2px) / 3));
      margin: 30px 85px 0 85px;
      background: #ffffff;
      box-shadow: 0px 3px 8px 0px rgba(123, 154, 153, 0.3);
      border-radius: 10px;
      border: 6px solid #ffffff;
      > :nth-child(2) {
        position: relative;
        &::before {
          content: '';
          width: 1px;
          height: 30px;
          background: #999999;
          position: absolute;
          left: 0;
          top: calc(50% - 15px);
        }
        &::after {
          content: '';
          width: 1px;
          height: 30px;
          background: #999999;
          position: absolute;
          right: 0;
          top: calc(50% - 15px);
        }
      }
      .score-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .score-title {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .score-content {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-top: 10px;
          > span {
            font-size: 38px;
            font-family: Oswald-Regular, Oswald;
            font-weight: 400;
            color: #ff6b69;
          }
        }
      }
    }
    .lesson-done {
      margin-top: 30px;
      .container-title {
        background: #ffefeb;
      }
    }
    .learn-status-count {
      margin-top: 30px;
      .container-title {
        background: #fef7e8;
      }
      .container-content {
        padding: 15px 20px 37px 20px;
        .lesson-status-item {
          display: flex;
          margin-bottom: 15px;
          .item-title {
            position: relative;
            padding-left: 17px;
            width: 100px;
            > span {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
            }
            &::before {
              content: '';
              height: 12px;
              width: 12px;
              background: #3abab3;
              position: absolute;
              top: calc(50% - 7px);
              left: 0;
            }
          }
          .item-content {
            display: flex;
            > div {
              width: 150px;
              padding: 0 30px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              border-right: 2px solid #999999;
            }
            :nth-last-child(1) {
              border-right: none;
            }
          }
        }
        :nth-child(2) {
          .item-title {
            &::before {
              background: #ff6b69;
            }
          }
        }
        :nth-child(3) {
          .item-title {
            &::before {
              background: #f9bb41;
            }
          }
        }
        :nth-child(4) {
          .item-title {
            &::before {
              background: #949aed;
            }
          }
        }
      }
    }

    .knowledge-done {
      margin-top: 30px;
      .container-title {
        background: #f5f9fd;
      }
      .container-content {
        padding: 15px 20px 37px 20px;
        .knowledge-item {
          margin-bottom: 20px;
          > span {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #f9bb41;
          }
          > div {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-top: 6px;
          }
        }
      }
    }
    .container-title {
      border-radius: 10px 10px 0px 0px;
      border: 1px solid #dee4f1;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      padding: 5px 20px;
      display: inline-block;
      border-bottom: none;
    }
    .container-content {
      min-height: 163px;
      position: relative;
      border-radius: 0px 10px 10px 10px;
      border: 1px solid #dee4f1;
      .container-input {
        height: 100%;
        padding: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .container-footer {
        height: 22px;
        background: rgba(56, 42, 116, 0.07);
        border-radius: 0px 0px 10px 10px;
        border: 1px solid #ebf0fc;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
  .no-stage {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #fff;
    > .tips {
      width: 534px;
      height: 66px;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 33px;
      text-align: center;
    }
    > img {
      width: 260px;
      height: 210px;
      margin: 33px;
    }
    .create-btn {
      cursor: pointer;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #72b22a;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #72b22a;
      letter-spacing: 1px;
      padding: 10px 30px;
      &:hover {
        color: #ffffff;
        background: #72b22a;
      }
    }
  }
}
</style>
